{% extends "automan/template.html" %}
{% load staticfiles %}
{% block title %}环境流转{% endblock %}

{% block content %}
<div>
    <span class="l"></span>
    <span class="select-box inline r">
        {% include "automan/filter.html" %}
        <button class="btn btn-success filter_btn" type="submit">过滤</button>
        {% include "automan/search.html" %}
    </span>
</div><br/><br/>
<table class="table table-border table-bordered table-bg">
    <thead>
        <th>发布单名称</th>
        <th>所属APP</th>
        <th>Git Branch</th>
        <th>环境</th>
        <th>操作</th>
        <th>用户</th>
        <th>修改时间</th>
    </thead>
    <tbody>
        {% for item in object_list %}
        <tr class="text-l">
            <td>
                <span data-toggle="tooltip" data-placement="bottom" title="{{ item.description }}">
                    <a href="{% url 'deploy:detail' pk=item.id %}">{{ item.name }}</a>
                </span>
            </td>
            <td>{{ item.app_name }}</td>
            <td>{{ item.branch_build }}</td>
            <td>
                <span class="label label-primary radius">{{ item.env_name }}</span>
            </td>
            <td>
                <span class="select-box inline l">
                    <select class="select envSelect">
                        <option value=""> --- </option>
                    </select>
                    <button class="btn btn-danger envChange" deploy_id="{{ item.id }}" deploy_name="{{ item.name }}" old_env_id="{{ item.env_name.id }}">环境流转</button>
                </span>
            </td>
            <td>{{ item.create_user }}</td>
            <td>{{ item.change_date }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table><br/>
{#分页    #}
{% include "automan/paginate.html" %}
{% endblock %}

{#模态对话框#}
{% block modal %}
<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content radius">
            <div class="modal-header">
                <h3 class="modal-title">确认对话框</h3>
                <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
            </div>
            <div class="modal-body">
                <p>将发布单<span id="selectDeploy"></span>流转到<span id="selectEnv"></span>环境？</p>
            </div>
            <form name="envForm" id="envForm" action="{% url 'envx:change' %}" method="post">
                {% csrf_token %}
                <input type="text" name="deploy_id" id="deploy_id" hidden/>
                <input type="text" name="env_id" id="env_id" hidden/>
            </form>
            <div class="modal-footer">
                <button class="btn btn-primary" id="changeEnvModal">确定</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script>
$(".search_btn").click(function () {
    var search_pk = $("input[name='search_pk']").val() || "demo";
    if (search_pk == "demo") {
        $("body").Huimodalalert({content: "<span class='c-error'>请输入关键字再进行搜索！</span>", speed: 3000});
        return false;
    }
    search_pk = search_pk.replace(/(^\s*)|(\s*$)/g, "");
    var url = "{% url 'envx:list' %}?search_pk=" + search_pk;
    console.log(url);
    location.href=url;
});
$(".filter_btn").click(function () {
    var filter_app_name = $("select[name='app_name']").val();
    console.log(filter_app_name);
    if (filter_app_name.length == 0) {
        $("body").Huimodalalert({content: "<span class='c-error'>请选择组件再过滤！</span>", speed: 3000});
        return false;
    }
    url = "{% url 'envx:list' %}?app_name=" + filter_app_name;
    console.log(url);
    location.href=url;
});

{% include "envx/envx.js" %}
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "{% url 'public:get-env' %}",
        dataType: "json",
        success: function (data) {
            console.log(data);
            $.each(data, function (index, value) {
                $(".envSelect").append("<option value='" + index + "'>" + value + "</option>");
            });
        },
        error: function () {
            alert("系统出现问题");
        }
    });
});
{% for msg in messages %}
    $("body").Huimodalalert({content: "<span {% if msg.tags %} class='{{ msg.tags }}'{% endif %}>{{ msg.message }}</span>", speed: 3000});
{% endfor %}
$(".envChange").click(function () {
    deploy_id = $(this).attr("deploy_id");
    deploy_name = $(this).attr("deploy_name");
    old_env_id = $(this).attr("old_env_id");
    env_id = $(this).prev().find("option:selected").val();
    env_name = $(this).prev().find("option:selected").text();
    console.log(old_env_id + ":" + env_id);
    if (old_env_id == env_id) {
        $("body").Huimodalalert({content: "<span class='c-error'>环境无效，请重新选择！</span>", speed: 3000});
        return false;
    }
    $("#selectEnv").html("<span class='label label-primary radius'>" + env_name + "</span>");
    $("#selectDeploy").html("<span class='label label-primary radius'>" + deploy_name + "</span>");
    $("#deploy_id").val(deploy_id);
    $("#env_id").val(env_id);
    $("#modal-demo").modal("show");
});
$("#changeEnvModal").click(function () {
    $("#envForm").submit();
});
</script>
{% endblock %}